<template>
  <!--修改子账号信息-->
  <view class="h-24 bg-white flex items-center justify-center">
    <image class="w-14 h-14 rounded-full" :src="accountInfo.merchant_logo" @click="uploadLogo" v-if="accountInfo.merchant_logo"></image>
    <view class="p-2" @click="uploadLogo" v-else>
      <image class="w-10 h-10" src="@/static/image/photo.png"></image>
    </view>

  </view>
  <view class="mt-2 bg-white px-4">
    <view class="flex gap-10 items-center h-14 border-bottom">
      <view class="w-max text-sm">商户名称</view>
      <input class="flex-1 h-full ml-auto text-right" type="text" v-model="accountInfo.merchant_name" placeholder-class="plcg" placeholder="请输入子账户商户名称">
    </view>
  </view>

  <view class="bg-white px-4">
    <view class="flex gap-10 items-center h-14 border-bottom">
      <view class="w-max text-sm">商户品牌</view>
      <input class="flex-1 h-full ml-auto text-right" type="text" v-model="accountInfo.merchant_brand" placeholder-class="plcg" placeholder="请输入商户品牌">
    </view>
  </view>

  <view class="bg-white px-4">
    <view class="flex gap-10 items-center h-14 border-bottom text-gray-300">
      <view class="w-max text-sm">手机号码</view>
      <view class="flex-1 text-right">{{ accountInfo.phone }}</view>
    </view>
  </view>

  <!--<view class="bg-white px-4">-->
  <!--  <view class="flex gap-10 items-center h-14 border-bottom">-->
  <!--    <view class="w-max text-sm">登录密码</view>-->
  <!--    <input class="flex-1 h-full ml-auto text-right" type="text" v-model="accountInfo.password" placeholder-class="plcg" placeholder="请输入密码 (添加后本人可修改)">-->
  <!--  </view>-->
  <!--</view>-->

  <view class="bg-white px-4">
    <view class="flex justify-between items-center">
      <view class="text-sm py-2">分成比例</view>
      <image class="w-6 h-6" @click="addInto" src="@/static/image/addInto.png"></image>
    </view>


    <view class="border-solid  border  border-gray-300 rounded" style="border-bottom: 0">
      <!--头部-->
      <view class="flex h-10 border-solid border-0 border-b border-gray-300">
        <view class="flex-1 text-slate-600 text-sm text-center">
          <view>营收范围</view>
          <view class="text-xs">(n&lt;X&lt;=m )</view>
        </view>
        <view class="w-20 box-border border-solid border-gray-300 border-0 border-l text-slate-600 text-sm flex items-center justify-center">
          分成
        </view>
        <view class="w-10 box-border border-solid border-gray-300 border-0 border-l text-slate-600 text-sm flex items-center justify-center">

        </view>
      </view>

      <view class="flex border-solid border-0 border-b border-gray-300" v-for="(item, index) in accountInfo.rate">
        <view class="flex-1 px-4 py-2 gap-1 flex justify-between items-center text-xs text-center">
          <view>
            <input type="number" class="w-18 h-8 text-xs border-solid border border-gray-300 rounded" v-model="item.start">
          </view>
          ~
          <view>
            <input type="number" class="w-18 h-8 text-xs border-solid border border-gray-300 rounded" v-model="item.end">
          </view>
        </view>
        <view class="w-20 text-xs box-border px-2 py-2 border-solid border-0 border-l border-gray-300">
          <view class="m-auto border-solid px-1 box-border flex items-center border border-gray-300 w-full h-full rounded">
            <input type="number" class="px-1 text-xs h-full" placeholder-class="plcg" v-model="item.rate" placeholder="">%
          </view>
        </view>

        <view class="w-10 box-border border-solid border-gray-300 border-0 border-l text-slate-600 text-sm flex items-center justify-center">
          <!--<text v-if="index" @click="deleteInfo(index)">删除</text>-->
          <image v-if="index" @click="deleteInfo(index)" class="w-6 h-6" src="@/static/image/delete.png"></image>
        </view>
      </view>

    </view>

  </view>

  <view class="bg-white px-4">
    <view class="pt-2 text-sm">商户经验信息:</view>

    <view class="flex gap-10 items-center h-14 border-bottom">
      <view class="w-max text-sm">经营产所</view>
      <picker class="flex-1 h-full flex items-center justify-end" v-model="accountInfo.type" mode="selector" :range="operateRange" range-key="text" @change="selectOperator">
        <view>{{ operateRange[operateValue].text }}</view>
      </picker>
      <!--<input class="flex-1 h-full ml-auto text-right" type="text" placeholder-class="plcg" placeholder="请输入8-15位组合密码">-->
    </view>

    <view class="flex gap-10 items-center h-14 border-bottom">
      <view class="w-max text-sm">商户资源位</view>
      <input class="flex-1 h-full ml-auto text-right" type="text" v-model="accountInfo.resources_w" placeholder-class="plcg" placeholder="请输入商户资源位">
    </view>

    <view class="flex gap-10 items-center h-14 border-bottom">
      <view class="w-max text-sm">商户地区</view>
      <input class="flex-1 h-full ml-auto text-right" type="text" v-model="accountInfo.merchant_address" placeholder-class="plcg" placeholder="请输入经营地区">
    </view>

    <view class="flex gap-10 items-center h-14 border-bottom">
      <view class="w-max text-sm">商户资源名称</view>
      <input class="flex-1 h-full ml-auto text-right" type="text" v-model="accountInfo.resources_name" placeholder-class="plcg" placeholder="请输入商户资源名称">
    </view>
    <view class="flex gap-10 items-center h-14 border-bottom">
      <view class="w-max text-sm">商户资源流量</view>
      <input class="flex-1 h-full ml-auto text-right" type="text" v-model="accountInfo.resources_flow" placeholder-class="plcg" placeholder="请输入资源流量">
    </view>
    <view class="flex gap-10 items-center h-14 border-bottom">
      <view class="w-max text-sm">备注</view>
      <input class="flex-1 h-full ml-auto text-right" type="text" v-model="accountInfo.remark" placeholder-class="plcg" placeholder="请输入备注信息">
    </view>

    <view class="py-4">
      <!--flex items-center justify-center-->
      <view class="w-4/5 h-8 m-auto flex items-center justify-center text-white bg-indigo-500 rounded-2xl text-sm" @click="increaseAccount">确认修改</view>
    </view>

  </view>



</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { uiwu } from "@/api/interface/interface";
import { fileUpload } from '@/api/public/index'
import { throttle } from '@/api/common'
import { getSubInfoApi, editSubInfoApi } from '@/api/increaseSub/index'
import { onLoad } from '@dcloudio/uni-app'

const uid = ref<string>('')

onLoad((options) => {
  uni.pageScrollTo({
    scrollTop: 0,
    duration: 10
  })
  uid.value = options?.utid
  getSubInfo(options?.utid)
})

const accountInfo = ref({
  merchant_name: '',
  merchant_logo: '',
  merchant_brand: '',
  phone: '',
  password: '',
  merchant_address: '', // 商户地区
  type: '',
  resources_w: '',
  resources_name: '',
  resources_flow: '',
  remark: '',
  rate: []
})

const getSubInfo = async (id) => {
  const res = await getSubInfoApi(id)
  const { phone } = res.data
  accountInfo.value = res.data.user_ext
  accountInfo.value.phone = phone

  operateValue.value = operateRange.findIndex(item => item.value == accountInfo.value.type)
}


/** 上传logo **/
const uploadLogo = () => {
  uni.chooseImage({
    success: async (chooseImageRes) => {
      uni.showLoading({ title: '正在上传...' })
      const data = await fileUpload({
        name: 'file',
        filePath: chooseImageRes.tempFilePaths[0],
      })
      if(data.status != 200) {
        uiwu.toast(data.msg)
      }else {
        accountInfo.value.merchant_logo = data.data.url
      }
      uni.hideLoading()
    }
  })
}

/** 分成比例数组 **/
const intoArray = ref([{
  start: '',
  end: '',
  rate: ''
}])

/** 添加分成 **/
const areAllPropertiesNonEmpty = (arr) => {
  function isEmpty(value) { return value === '' }

  for (let i = 0; i < arr.length; i++) {
    const obj = arr[i];
    // 遍历对象的每个属性
    for (const key in obj) {
      if(isEmpty( obj[key]) ) {
        // 如果找到任何空值，立即返回false
        return false;
      }
    }
  }
  // 如果没有找到空值，则返回true
  return true;
}

/** 新增分成比例 **/
const addInto = () => {
  const isHollow = areAllPropertiesNonEmpty(accountInfo.value.rate)
  if(!isHollow) return uiwu.toast('请先输入完整')
  accountInfo.value.rate.push({ start: '', end: '', rate: '' })
}

/** 删除分成比例-单行 **/
const deleteInfo = (index) => {
  console.log('index===', index)
  accountInfo.value.rate.splice(index, 1)
}

const operateValue = ref(0)
const operateRange = reactive([
  { value: 0, text: '全部' },
  { value: 10, text: '其他/未知' },
  { value: 20, text: '线下场所(非电玩)' },
  { value: 30, text: 'app/网站' },
  { value: 40, text: '公众号' },
  { value: 50, text: '个人玩家' },
  { value: 60, text: '网红主播' },
  { value: 70, text: '线下电玩城' },
])
const selectOperator = (opValue) => {
  operateValue.value = opValue.detail.value
  accountInfo.value.type = String(operateRange[opValue.detail.value].value)
}

/** 子账号-修改btn **/
const increaseAccount = throttle( async () => {
  // accountInfo.value.rate = intoArray.value
  const res = await editSubInfoApi(accountInfo.value, uid.value)
  if( res.status == 200 ) {
    uiwu.toast('修改成功')

    setTimeout(() => {
      uni.switchTab({
        url: '/pages/subAccount/index',
        success() {
          uni.$emit('updateSubList', { status: 1 })
        }
      })
    }, 3000)
  }

}, 3000)

</script>

<style scoped lang="scss">
page {
  min-height: 100vh;
  background: #f5f5f5;
}
.plcg {
  font-size: 24rpx;
}
</style>
